var store = {
  debug: true,
  state: {
    loader: 0
  },
  registryLoader(newValue) {
    if (this.debug) console.log('registryLoader', newValue);
    this.state.loader++;
  },
  consumerLoader(newValue) {
    if (this.debug) console.log('consumerLoader', newValue);
    this.state.loader--;
  },
  getLoader() {
  	return this.state.loader;
  }
}

const category = {
	props: ['prepare','postLoader'],
	mounted: function() {
		//console.info(this.menus);
		this._initSwiper();
	},
	methods: {
		_initSwiper: function() {
			var that = this;
			var mySwiper = new Swiper('.swiper-container', {
		    	slidesPerView : 5,
		    	slidesPerGroup: 1,
		    	observer:true,
		    	observeParents:true,
		    	freeMode: true,
	        	freeModeMomentumRatio: 0.5,
		    	initialSlide: 0,
		    	on: {
		    		tap: function(swiper,e) {
		    			// $(".swiper-container .menu-slide-active").removeClass('menu-slide-active');
	        //       		$(".swiper-container .swiper-slide").eq(this.clickedIndex).addClass('menu-slide-active');
	        //  		    $(".swiper-container-body").eq(this.clickedIndex).fadeIn().siblings('.swiper-container-body').hide();
	         		    var load = $(swiper.srcElement).attr("pre");
	        		    that.postOwnLoader(load);
		    		},
		    		init: function() {
		    			$("a[pre=2]").click();
		    		}		
		    	}
			});
		},
		postOwnLoader: function(pre) {
			this.$parent.postLoader(pre);
		}
	},
	template: '<div class="aui-platform-list" style="width: 100%; ">'+
				'<div class="aui-palace topmenu">'+
					'<div class="swiper-container ">'+
						'<div class="swiper-wrapper">'+
							'<span class="swiper-slide swiper-auto" v-for="(item,index) in prepare">'+
								'<a href="javascript:void(0)" class="menuitem" :pre="item.id">{{ item.categoryName }}</a>'+
							'</span>'+
						'</div>'+
					'</div>'+
				'</div>'+
			'</div>'
};

const lunbo = {
	props: ['lunbos'],
	mounted: function() {
		this._initSwiper();
	},
	methods: {
		_initSwiper: function() {
			var that = this;
			
			var pcs = new Swiper('.m-slider',{
				observer:true,
		    	observeParents:true,
		    	autoplay:true,
		    	pagination: {
				   el: '.slider-pagination',
				},
			});
		}
	},
	template: '<div class="m-slider">'+
						'<div class="slider-wrapper swiper-wrapper">'+
							'<div class="swiper-slide slider-item" v-for="item in lunbos">'+
								'<a href="javascript:;">'+
									'<img :src="item.pictureName" :alt="item.targetLink">'+
								'</a>'+
							'</div>'+
						'</div>'+
						'<div class="slider-pagination"></div>'+
					'</div>'
}

var newVue = new Vue({
	el: '#main',
	components: {
		'category':category,
		'lunbo': lunbo
	},
	data: {
		headerData:{
			'titleColor':'#44c7fb',
			'title':'码客山威',
			'icon':true,
			'iconColor':'white',
			'titleIcon':'fa-plus-circle'
		},
		lunbos:null,
		menus:null,
		posts:{},
		viewposts: new Array(),
		routers: null,
		add_btn: false,
		body: null,
		menu: null,
		currentType: -1,
		sharedState: store.state
	},
	created: function() {
		this.lunbosLoader();
	},
	beforeMount: function() {
		this.init();
		this.categoryLoader();
	},
	mounted: function() {
		var that = this;
		store.registryLoader("init loader");
		setTimeout(function(){
			that.postLoader(14);
			store.consumerLoader("init loader");
		},200);

	},
	methods: {
		loader: function() {
			return store.getLoader() == 0;
		},
		reload: function() {
			//this.postLoader();
		},
		init: function() {
			this.routerLoader();
		},
		postLoader: function(loaderIndex) {
			var that = this;
			that.viewposts = new Array();
			store.registryLoader("postLoader");
			$(".swiper-container .menu-slide-active").removeClass('menu-slide-active');
			this.currentType = loaderIndex;
			$("a[pre="+loaderIndex+"]").addClass('menu-slide-active');
			if(that.posts && that.posts["p"+loaderIndex]) {
				//console.info("loader data from category id[ "+ loaderIndex+" ] cache "+JSON.stringify(that.posts["p"+loaderIndex], null, '\t'));
				var len = that.posts["p"+loaderIndex].length;
				var limit = 10;
				if(len > limit) {
					for(var i=0;i < limit;i++) {
					 	that.viewposts.push(that.posts["p"+loaderIndex][i]);
					}
				} else {
					for(var i=0;i< len ;i++) {
					 	that.viewposts.push(that.posts["p"+loaderIndex][i]);
					}
				}
				setTimeout(function(){
					store.consumerLoader("postLoader");
				},1000);
				return ;
			};
			util.get("https://www.maksdu.com/app/post/all/cate/"+loaderIndex,null,function(result){
				if(result.value) {
					that.posts["p"+loaderIndex] = result.value;
					//console.info("loader data from category id[ "+ loaderIndex+" ] apiRequest "+JSON.stringify(that.posts["p"+loaderIndex], null, '\t'));
					var len = that.posts["p"+loaderIndex].length;
					var limit = 10;
					if(len > limit) {
						for(var i=0;i < limit;i++) {
						 	that.viewposts.push(that.posts["p"+loaderIndex][i]);
						}
					} else {
						for(var i=0;i< len ;i++) {
						 	that.viewposts.push(that.posts["p"+loaderIndex][i]);
						}
					}
				}
				console.info(that.viewposts);
				setTimeout(function(){
					store.consumerLoader("postLoader");
				},1000);
			});
		},
		categoryLoader: function() {
			var that = this;
			//store.registryLoader("categoryLoader");
			util.get("https://www.maksdu.com/app/category/all",null, function(result) {
				that.menus = result.value;	
				//store.consumerLoader("categoryLoader");	    
			});
			
		},
		lunbosLoader: function() {
			var that = this;
			//store.registryLoader("lunbosLoader");
			util.get("https://www.maksdu.com/app/carouse/getshow", null, function(result){
				that.lunbos = result.value;
				//store.consumerLoader("lunbosLoader");

			})
			//this.lunbos = ['images/banner.png','images/banner.png','images/banner.png','images/banner.png'];
		},
		routerLoader: function() {
			this.routers = [
				{
					text: '玛珈山',
					color: '#FFFFFF',
					background: 'url(images/mgs.png) 12% 34% no-repeat',
					css: 'item-block bg_mgs'
				},
				{
					text: '跳蚤市场',
					color: 'rgb(68, 26, 26)',
					background: 'url(images/tzsc.png) 12% 5% no-repeat',
					css: 'item-block bg_tzsc'
				},
				{
					text: '表白墙',
					css: 'item-block bg_bbq'
				},
				{
					text: '山威树洞',
					color: '#ffffff',
					background: 'url(images/sd.png) 12% 5% no-repeat',
					css: 'item-block bg_sd'
				}

			]
		},
		routerHover: function(event) {

		},
		dateFormatter: function(newDate) {
			var theTime = new Date().getTime();
			var mid = theTime - newDate;

			if(mid < 60 * 1000) {
				return Math.ceil(mid / 1000) +' 秒 前';
			} else if(mid < (3600 * 1000)) {
				return Math.ceil(mid / (60 * 1000))+ '分钟 前';
			} else if(mid < (24*3600 * 1000)) {
				return Math.ceil(mid / (3600 * 1000))+ '小时 前';
			} else {
				return new Date(newDate).Format('MM-dd');
			}
		},
		counter: function(item) {
			var i = 1;
			var length = 0;
			console.info(item.extraMsg);
			if(item.extraMsg.replys) {
			    length = item.extraMsg.replys.length;
			}
			return '回复:'+(i+length);
		},
		menuclick: function() {
			showNewBox();
		},
		menuclose: function() {
			closeNewBox();
		},
		pageClick: function(event) {
			//console.info(event);
			// $(".swiper-wrapper").children().removeClass("menu-slide-active");
			// var src = event.srcElement;
			// $(src).parent().addClass("menu-slide-active");
			// var index = $(src).attr("pre");
			//console.info(index);
      		//this.body.slideTo(index+1, 1000, true);//切换到第一个slide，速度为1秒
		}

	}
})

function showNewBox() {
	$("#newbox").css('display','block');
}

function closeNewBox() {
	$("#newbox").css('display','none');
}